<template>
  <div v-loading="loading">
    <div v-if="head" id="head">
      <div>
        <div>采集结果：{{ lock ? '已采集' : '暂无' }}
          <el-button :disabled="price>balance" type="primary" size="mini" @click="getData()">刷新</el-button>
        </div>
        <div>
          <el-button type="primary" size="mini" @click="getGather()">
            邀请采集
            {{ computePrice }}
          </el-button>
        </div>
        <div>
          上次采集时间：{{ time ? time : '暂无' }}
        </div>
      </div>
      <p id="describe">{{ explain }}</p>
    </div>

    <div style="margin: 0 6px">
      <el-card class="js">
        <div slot="header" class="he">
          <span>基础信息</span>
        </div>
        <el-descriptions size="mini" :column="5" border :colon="false">
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              教育程度
            </template>
            {{ jcxx.jycd }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              婚姻状况
            </template>
            {{ jcxx.hyzk }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              居住城市
            </template>
            {{ jcxx.jzcs }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              详细地址
            </template>
            {{ jcxx.xxdz }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              工作单位
            </template>
            {{ jcxx.gzdw }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              单位性质
            </template>
            {{ jcxx.dwxz }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              所在岗位
            </template>
            {{ jcxx.szgw }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              单位地址
            </template>
            {{ jcxx.dwdz }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              单位电话
            </template>
            {{ jcxx.dwdh }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              芝麻分
            </template>
            {{ jcxx.zmf }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-card class="js">
        <div slot="header" class="he">
          <span>紧急联系人</span>
        </div>
        <el-descriptions size="mini" v-for="(item,index) in jcxx.lxr" v-if="item.xm" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{ item.xm }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              联系方式
            </template>
            {{ item.lxfs }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              关系
            </template>
            {{ item.gx }}
          </el-descriptions-item>

        </el-descriptions>
      </el-card>

    </div>
  </div>
</template>
<script>
  import {getBalance} from "@/api/system/user";
  import {queryRecord} from "@/api/system/query";

  export default {
    name: "jcxx",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,
        balance: undefined,
        time: undefined,
        msg: '未采集',
        jcxx: {
          jycd: '',
          hyzk: '',
          jzcs: '',
          xxdz: '',
          gzdw: '',
          dwxz: '',
          szgw: '',
          dwdz: '',
          dwdh: '',
          zmf: '',
          lxr: []
        }
      }
    },
    computed: {
      computePrice() {
        return this.price > this.balance ? '（余额不足请充值）' : (this.zeroTwo(this.price) + (this.priceType ? '（默认价）' : '（定制价）'))
      }
    },
    mounted() {
      this.refreshBalance()
      this.getData()
    },
    methods: {
      refreshBalance() {
        getBalance().then(response => {
          this.balance = response.data
        })
      },
      getGather() {
        if (this.price > this.balance) {
          this.$bus.$emit('openPay')
        } else {
          this.$emit('openShare', '2')
        }
      },
      getData() {
        this.loading = true
        queryRecord(this.queryData).then(response => {
          if (response.info) {
            this.time = response.time
            this.msg = '已采集'
            this.jcxx = JSON.parse(response.info)
            this.lock = true
          }
          this.loading = false
        })
      }
    }
  }
</script>

<style scoped>
  #head {
    width: 50vw;
    margin: 0px auto 8px;
  }

  #head div {
    display: flex;
    justify-content: space-around;
    align-items: center
  }

  #describe {
    margin: 5px 0 0;
    font-weight: bold;
    text-align: center;
  }
</style>



